<div class="pm_modal {{ctrl.class}}" role="dialog" style="display: block;">
    <div class="modal-dialog">
        <button
            type="button"
            name="cancel"
            ng-click="ctrl.onClickClose()"
            aria-hidden="true"
            title-translate="Close"
            title-translate-context="Action" class="fa fa-times close"></button>
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">{{ ::ctrl.title }}</h4>
            </div>
            <div class="modal-body">
                <div class="alert alert-info" translate translate-context="Info">
                    <p><i class="fa fa-info-circle"></i> Use Drag and Drop to rank merging priority between contacts.</p>
                    <p>Uncheck contacts you do <b>not</b> want to merge.</p>
                </div>
                <contact-merger
                    details="ctrl.onClickDetails"
                    preview="ctrl.onClickPreview"
                    groups="ctrl.duplicates"></contact-merger>
            </div>
        </div>
        <div class="modal-footer">
            <button class="pm_button modal-footer-button" ng-click="ctrl.onClickClose()" name="cancel" translate-context="Action" translate>Cancel</button>
            <button class="pm_button primary modal-footer-button" ng-click="ctrl.onClickMerge()" tabindex="1" name="merge" translate-context="Action" translate>Merge</button>
        </div>
    </div>
    <div class="modal-overlay"></div>
</div>
